<template>
    <div>
        <router-link to="/about">用户管理</router-link><br />
        <router-link to="/img">图片管理</router-link><br />
        <router-link to="/line">物流线路管理</router-link>
        <div class="placeholder">
            <el-button type="text" @click="dialogVisible = true">添加用户信息</el-button>
            <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                <div id="filename"></div>
                <!--<div class="webuploader-pick">-->
                姓名：<el-input v-model="input1" placeholder="请输入内容" />
                电话：<el-input v-model="input2" placeholder="请输入内容" />
                邮箱：<el-input v-model="input3" placeholder="请输入内容" />
                地址：<el-input v-model="input4" placeholder="请输入内容" />
                <!-- <input type="file" name="file" id="file1" />
                        选择图片-->
                <!--</div>-->
                &nbsp;&nbsp;
                <div class="webuploader-pick">
                    <input type="submit" value="提交" id="sub2" @click="upload2()">
                    提交
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <div>
            <el-table
                :data="userData.slice((pageInfo.currentPage - 1) * pageInfo.pageSize, pageInfo.currentPage * pageInfo.pageSize)"
                style="width: 100%">
                <el-table-column label="姓名" width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="电话" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.phone }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="邮箱" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.mail }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="地址" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.address }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteRow()" id="delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :currentPage="pageInfo.currentPage" :page-size="pageInfo.pageSize" :total="pageInfo.pageTotal">
            </el-pagination>
        </div>
    </div>
</template>


<script>
import axios from 'axios'
export default {
    data() {
        return {
            input1: "",
            input2: "",
            input3: "",
            input4: "",
            dialogVisible: false,
            tableData: [{}, {}, {}],
            userData: [{}],
            pageInfo: {
                currentPage: 1,
                pageSize: 5,
                pageTotal: 20
            }
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        show() {
            var file1 = document.getElementById("file1");
            var val = file1.value;
            var arr = val.split("\\");
            document.getElementsByClassName("filename")[0].innerHTML = arr[2];
        },
        upload2() {
            let sub2 = document.querySelector("#sub2");
            let fileUser = { name: this.input1, phone: this.input2, mail: this.input3, address: this.input4 };
            sub2.onclick = function () {
                fetch("http://localhost:3000/upload2", {
                    method: "POST",
                    headers: {
                        Authorization: localStorage["token"]
                    },
                    body: JSON.stringify(fileUser)
                }).then(res => res.json())
                    .then(res => {
                        console.log(res)
                    })
            }
        },
        getUserInfo() {
            axios.get('http://localhost:3000/getUserInfo').then(res => {
                console.log(res)
                if (res.status == 200) {
                    //console.log(res.data)
                    this.userData = res.data;
                    
                }
            })
        },
        deleteRow() {
            let deleteButton = document.querySelector("#delete");
            console.log(this.userData['0'].userId)
            let fileUser = this.userData['0'].userId
            deleteButton.onclick =
                function () {
                    fetch("http://localhost:3000/deleteRow", {
                        method: 'POST',
                        headers: {
                            Authorization: localStorage["token"]
                        },
                        body: JSON.stringify(fileUser)
                    }).then(res => res.json())
                        .then(res => {
                            console.log(res)
                            //console.log(res.data)
                        })
                }
        },
        handleSizeChange(val) {
            this.pageInfo.pageSize = val;
        },
        handleCurrentChange(val) {
            this.pageInfo.currentPage = val;
        },
    },
    mounted() {//条件完备
        //this.getList();
        this.getUserInfo();
    }
}
</script>
<style scoped>
.placeholder {
    border: 3px dashed #e6e6e6;
    min-height: 238px;
    padding-top: 158px;
    text-align: center;
    color: #cccccc;
    font-size: 18px;
    position: relative;
}

.webuploader-pick {
    font-size: 18px;
    background: #00b7ee;
    border-radius: 3px;
    line-height: 44px;
    padding: 0 30px;
    color: #fff;
    display: inline-block;
    margin: 20px auto;
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.webuploader-pick {
    position: relative;
    display: inline-block;
    background: #00b7ee;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 10px 18px;
    overflow: hidden;
    color: white;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    font-size: 12px;
    cursor: pointer;
}

.webuploader-pick input {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    padding: 10px 18px;
    cursor: pointer;
}

.webuploader-pick:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: red;
    text-decoration: none;
}
</style>